<template>
  <section>
    <!--start 面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>资金</el-breadcrumb-item>
        <el-breadcrumb-item>扣款审核</el-breadcrumb-item>
      </el-breadcrumb>
      <help-components>
				<span slot="headText">{{helpData.templateName}}</span>
				<p slot="headDescText" v-html="helpData.templateRemark"></p>
				<div slot="helpContentWrap">
					<div v-for="(item,index) in helpData.questionAndAnswerArray">
						<h3>{{item.templateContent}}</h3>
						<p v-html="item.templateRemark"></p>
					</div>
				</div>
			</help-components>
    </div>
    <!--end 面包屑-->

    <!--start content-->
    <div class="content">
      <!--zijin-conBox   start-->
      <div class="ziJin-conBox">

        <!--头部  start-->
        <div class="zJ-header">
          <div class="public-th clearfix" v-if="vue_selectAllData> 0">
            <em @click="selectAll" class="el-icon-close"></em>
            <span class="selectSpan">已选择<i>{{vue_selectAllData}}</i>项,合计金额：{{fundWithdrawSet.allMoney}}</span>
            <b class="selectB">|</b>
          	<span class="selectSpan" @click='batchAuditPass' v-if="auditPass"><em class="iconfont">&#xe72b;</em>初审</span>
            <span class="selectSpan" @click='batchReviewPass' v-if="reviewPass"><em class="iconfont">&#xe65a;</em>复审</span>
          </div>
          <div class="public-th clearfix" v-else>
            <div class="public-left clearfix">
              <div class="goods-input">
                <input type="text" placeholder="请输入客户名称" v-model="fundWithdrawQb.memberName" @keydown.enter="queryByMemberName"/><i @click="queryByMemberName"></i>
              </div>
            </div>
            <span class="heJi">待确认扣款合计：<i>{{fundWithdrawSet.sumInfo.withdrawMoneySum}}</i></span>
          </div>
        </div>
        <!--头部  end-->

        <!--table   start-->
        <el-table
        	:class="{beforeNone:fundWithdrawSet.list.length!='0'}"
          ref="multipleTable"
          :data="fundWithdrawSet.list"
          tooltip-effect="dark"
          :max-height="vue_tableHeight"
          style="width: 100%"
          @sort-change="vFun_sort"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="withdrawCode"
            sortable="custom"
            label="流水号"
            width="200">
            <template scope="scope"><span class="goTo" @click="goTo(scope.$index, fundWithdrawSet.list)">{{ scope.row.withdrawCode}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="withdrawDateStr"
            sortable="custom"
            label="时间"
            width="200">
          </el-table-column>
          <el-table-column
            prop="memberName"
            sortable="custom"
            label="客户名称"
            width="200">
          </el-table-column>
          <el-table-column
            prop="ddlistName"
            label="扣款方式"
            width="150">
          </el-table-column>
          <el-table-column
          	sortable="custom"
            prop="withdrawMoneyStr"
            label="金额"
            width="150">
          </el-table-column>
          <el-table-column
            prop="withdrawSummary"
            sortable="custom"
            label="摘要"
            width="150">
          </el-table-column>
          <el-table-column
            prop="withdrawRemark"
            sortable="custom"
            label="备注"
            min-width="200">
          </el-table-column>
          <el-table-column
            fixed="right"
            label=""
            width="60">
            <template scope="scope">
              <el-popover trigger="hover" class="rightR" placement="bottom">
                <p class="p" @click="goTo(scope.$index, fundWithdrawSet.list)"><em class="iconfont" style="font-size: 15px">&#xe656;</em>详情</p>
                <p class="p" @click="surePay(scope.$index, fundWithdrawSet.list)" v-if="false"><em class="iconfont" style="font-size: 17px">&#xe6f1;</em>审核</p>
                <p class="p" @click="voidPay(scope.$index, fundWithdrawSet.list)"><em class="iconfont">&#xe644;</em>作废</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag><em class="iconfont tab-hover">&#xe607;</em></el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>

        <!--table  end-->
        <!--分页  start-->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="parseInt(fundWithdrawSet.pageTools.pageNo)"
            :page-sizes="fundWithdrawSet.pageTools.pageSizeOptions"
            :page-size="parseInt(fundWithdrawSet.pageTools.pageSize)"
            layout="total, prev, pager, next, sizes,jumper"
            :total="parseInt(fundWithdrawSet.pageTools.recordCount)">
          </el-pagination>
        </div>
        <!--分页  end-->
      </div>
      <!--zijin-conBox   end-->

    </div>
    <!--end content-->
  </section>
</template>


<script>
  import helpComponents from '../../../components/help/help'
	export default {
		components:{helpComponents},
    data(){
      return {
      	helpData:{
					templateName:"",
					templateRemark:"",
					questionAndAnswerArray:[]
				},
      	fundWithdrawSet:{
      		list:[],															//表格数据
					pageTools:{},													//分页数据
					sumInfo:{},												  	//汇总信息
      	},
      	
      	fundWithdrawQb:{
      		memberName:"",  //搜索栏输入会员账号
					orderStr:'',
      	},
      	
      	withdrawMoneySum:0,                  //提现总金额
				allMoney:null,                       //计算选中总金额的
      	
      	vue_tableHeight:0,
        vue_selectAllData: '',                    //复选框根据数值判断显示隐藏
        vue_withdrawCodeStr:"",                   //多选框选中值
        
        fundWithdrawParamKey:"FundWithdraw001",//提现流程设置key
        fundWithdrawParamViewVo:"",            //提现流程自定义对象
        fundWithdrawParamValueMap:"",          //提现流程
		    auditPass:true,                        //初审是否显示
				reviewPass:true,                       //复审是否显示
      }
    },

    methods: {
    	vFun_sort(type){
    		if(type.order==='ascending'){
    			this.fundWithdrawQb.orderStr=type.prop
    		}else if(type.order==='descending'){
    			this.fundWithdrawQb.orderStr=type.prop +' desc'
    		}else{
    			this.fundWithdrawQb.orderStr=''
    		};
    		this.queryByPage();
    	},    	
    	systemTemplateAjax(){
				this.axios({
					method:"GET",
					url:"/v3/system/templates/00100000007"
				}).then((res)=>{
						this.helpData.templateName = res.data.templateName;
						this.helpData.templateRemark = res.data.templateRemark;
						this.helpData.questionAndAnswerArray = res.data.questionAndAnswerArray;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
//---------------------------点击头部关闭按钮   start---------------------------
      selectAll(){
        this.$refs.multipleTable.clearSelection()
      },
//---------------------------表格里的复选框操作   start---------------------------
      handleSelectionChange(val) {
        this.vue_selectAllData = val.length;
        this.fundWithdrawSet.allMoney = 0;
        val.forEach((item,index,arr)=>{
        	if(!isNaN(item.withdrawMoney)){
        	   this.fundWithdrawSet.allMoney += parseFloat(item.withdrawMoney);	
        	}
        })
        this.fundWithdrawSet.allMoney = this.Public.formatMoney(this.fundWithdrawSet.allMoney, 2)
        //获取选中值
        this.vue_withdrawCodeStr = "";
				for(let i=0,len=val.length;i<len;i++){
					this.vue_withdrawCodeStr += val[i].withdrawCode+","
				}
				this.vue_withdrawCodeStr = this.vue_withdrawCodeStr.substring(0,this.vue_withdrawCodeStr.length-1);
      },
//---------------------------详情弹出层  start---------------------------
      goTo(index, data){
        const h = this.$createElement;
        this.$msgbox({
          title: '扣款',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'line-height:24px;'}, [
                  h('span', {style: 'color:#96a6b6'}, '金额： '),
                  h('i', {style: 'color: #415161'}, data[index].withdrawMoneyStr)
                ],
              ),
              h('p', {style: 'line-height:24px;'}, [
                  h('span', {style: 'color:#96a6b6'}, '扣款方式： '),
                  h('i', {style: 'color: #415161'}, data[index].ddlistName)
                ],
              ),
              h('p', {style: 'margin-bottom: 30px;line-height:24px;'}, [
                  h('span', {style: 'color:#96a6b6'}, '备注：'),
                  h('i', {style: 'color: #415161'}, data[index].withdrawRemark==""?"无":data[index].withdrawRemark)
                ],
              ),
              h('p', {style: 'line-height:24px;'}, [
                  h('span', {style: 'color:#96a6b6'}, '流水号： '),
                  h('i', {style: 'margin-right: 30px;color: #415161'}, data[index].withdrawCode),
                  h('span', {style: 'color:#96a6b6'}, '日期： '),
                  h('i', {style: 'color: #415161'}, data[index].withdrawDateStr)
                ],
              ),
              h('p', {style: 'line-height:24px;'}, [
                  h('span', {style: 'color:#96a6b6'}, '操作人：'),
                  h('i', {style: 'color: #415161'}, data[index].createOpName)
                ],
              ),
            ],
          ),
          customClass: "dDFk",
          showCancelButton: true,
          confirmButtonText: '确定',
          showCancelButton: false
        }).then(action => {

        });
      },

//---------------------------扣款确认弹出层   start---------------------------
      surePay(index, data){
        const h = this.$createElement;
        this.$msgbox({
          title: '审核',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'text-align: center;font-size: 16px;color: #415161;text-align: center;line-height: 25px;margin-bottom: 8px;'}, '是否审核通过该笔扣款款项？'),
              h('p', {style: 'text-align: center;color:#96a6b6;line-height: 25px;'}, '客户名称：' + data[index].memberName),
              h('p', {style: 'text-align: center;color:#96a6b6;line-height: 25px;'}, '金额：' + data[index].withdrawMoneyStr),
              h('p', {style: 'text-align: center;color:#96a6b6;line-height: 25px;'}, '扣款方式：' + data[index].ddlistName),
            ],
          ),
          customClass: "surePay clearfixBox",
          cancelButtonClass: 'fr',
          confirmButtonClass: 'fr',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(action => {

          if (action === 'confirm') {
            this.axios({
              method: 'patch',
              url: "/v3/fund/withdraws/"+data[index].withdrawCode+"/batchAuditPass",
              data: {}
            }).then((res) => {
                this.Public.openSuccess(this,"操作成功！");
                this.queryByPage();
            }).catch((err)=>{
					      this.Public.openError(this,err.response.data)
				    });	
          }


        });

      },


//---------------------------删除弹出层   start---------------------------
      voidPay(index, data){
        const h = this.$createElement;
        this.$msgbox({
          title: '确认',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'text-align: center;font-size: 16px;color: #415161;text-align: center;line-height: 25px;margin-bottom: 8px;'}, '是否确认作废该笔扣款记录？'),
              h('p', {style: 'text-align: center;color:#96a6b6;line-height: 25px;'}, '客户名称：' + data[index].memberName),
              h('p', {style: 'text-align: center;color:#96a6b6;line-height: 25px;'}, '金额：' + data[index].withdrawMoneyStr),
              h('p', {style: 'text-align: center;color:#96a6b6;line-height: 25px;'}, '扣款方式：' + data[index].ddlistName),
            ],
          ),
          customClass: "surePay clearfixBox",
          cancelButtonClass: 'fr',
          confirmButtonClass: 'fr',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(action => {

          if (action === 'confirm') {
            this.axios({
              method: 'delete',
              url: "/v3/fund/withdraws/"+data[index].withdrawCode,
              data: {}
            }).then((res) => {
                this.Public.openSuccess(this,"操作成功！");
                this.queryByPage();
            }).catch((err)=>{
					      this.Public.openError(this,err.response.data)
				    });	
          }
        });

      },

//
//---------------------------分页    start---------------------------
      handleSizeChange(val) {
        this.fundWithdrawSet.pageTools.pageSize = val;
        this.queryByPage();
      },
      handleCurrentChange(val) {
        this.fundWithdrawSet.pageTools.pageNo = val;
        this.queryByPage();
      },
//---------查询table数据 ------------
			queryByPage(){
				  this.axios({
          method: 'post',
          url: "/v3/fund/withdraws/list",
          data: {
            "limit": this.fundWithdrawSet.pageTools.pageSize,
            "offset": (this.fundWithdrawSet.pageTools.pageNo - 1) * this.fundWithdrawSet.pageTools.pageSize,
            "memberName": this.fundWithdrawQb.memberName,
            "orderStr":this.fundWithdrawQb.orderStr,
          }
        }).then((res) => {
            res.data.list.forEach((item, index, arr) => {
              item.withdrawMoneyStr = this.Public.formatMoney(item.withdrawMoney, 2)
            });
            this.fundWithdrawSet.list = res.data.list;
            this.fundWithdrawSet.pageTools = res.data.pageTools;
            this.fundWithdrawSet.sumInfo = res.data.sumInfo;
            this.fundWithdrawSet.pageTools.pageSizeOptions = JSON.parse(this.fundWithdrawSet.pageTools.pageSizeOptions);
            this.fundWithdrawSet.sumInfo.withdrawMoneySum = this.Public.formatMoney(res.data.sumInfo.withdrawMoneySum, 2);     //充值总金额
        }).catch((err)=>{
			      this.Public.openError(this,err.response.data)
		    });
			},
//--------------------------根据客户名称进行查询---------------------------------      
      queryByMemberName() {
      	this.fundWithdrawSet.pageTools = this.$store.state.page;
      	this.queryByPage();
      	this.fundWithdrawQb.memberName = "";
      },
//-----------------------批量审核   start-----------------
      batchAuditPass(){//
        const h = this.$createElement;
        this.$confirm('确认批量审核？', '确认', {
          message: h('span', {style: 'padding:20px;'},"确认批量审核?"),
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass: "fr",
					confirmButtonClass: "fr",
					customClass: "clearfixBox"
				}).then(() => {
					//点击确定的回调
					this.axios({
						method: "patch",
						url: "/v3/fund/withdraws/"+this.vue_vue_withdrawCodeStr+"/batchAuditPass",
						data: {}
					}).then((res) => {
						if(res.data.state == res.data.success) {
              this.Public.openSuccess(this,"操作成功！");
              this.queryByPage();
						} else {
							this.Public.openError(this,res.data.msg)
						}
					}).catch((err)=>{
				      this.Public.openError(this,err.response.data)
			    });
				}).catch((err)=>{
			      this.Public.openError(this,err.response.data)
		    });

      },
//-----------------批量复审  start---------------------------
      batchReviewPass(){
          const h = this.$createElement;
      	  this.$confirm('确认批量审核？', '确认', {
          message: h('span', {style: 'padding:20px;'},"确认批量审核?"),
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass: "fr",
					confirmButtonClass: "fr",
					customClass: "clearfixBox"
				}).then(() => {
					//点击确定的回调
					this.axios({
						method: "patch",
						url: "/v3/fund/withdraws/"+this.vue_withdrawCodeStr+"/batchReviewPass",
						data: {}
					}).then((res) => {
						if(res.data.state == res.data.success) {
							this.Public.openSuccess(this,"操作成功！");
              this.queryByPage();
						} else {
							this.Public.openError(this,res.data.msg)
						}
					}).catch((err)=>{
				      this.Public.openError(this,err.response.data)
			    });
				}).catch((err)=>{
			      this.Public.openError(this,err.response.data)
		    });

      },
//--------------------提现流程自定义配置数据-------------------------
	    queryParamValue(){
	    	/*1说明流程存在反之则说明不存在*/
	    	this.axios({
	          method: 'get',
	          url: "/v3/basic/params/"+this.fundWithdrawParamKey,
	          data: {}
	        }).then((res) => {
	        	if(res.data.state == res.data.success){
	        		this.fundWithdrawParamValueMap = res.data.paramValueMap;
	        		this.fundWithdrawParamViewVo = res.data;
	        		if(res.data.paramValueMap!=null && res.data.paramValueMap!=""&&res.data.paramValueMap!=undefined){
	        			this.fundWithdrawParamValueMap["auditPass"]==0?this.auditPass=false:this.auditPass=true;
	        			this.fundWithdrawParamValueMap["reviewPass"]==0?this.reviewPass=false:this.reviewPass=true;
	        		}
	        	}
	        }).catch((err)=>{
	        	
				      this.Public.openError(this,err.response.data)
			    });
	    },

    },
    created(){
    	this.fundWithdrawSet.pageTools=this.$store.state.page;
    },
    mounted(){
//---------------------------打开页面渲染数据   start---------------------------
      this.queryByPage();
     	this.vue_tableHeight = document.documentElement.clientHeight - 220;

//---------------------------点击下拉箭头旋转---------------------------
      document.querySelector('body').onclick = () => {
        if (this.allOrder == true) {
          this.allOrder = false;
        }
      };

      this.queryParamValue();
      //帮助功能
			this.systemTemplateAjax();
    }
  }

</script>

<style scoped>
  @import "../../../assets/css/zijin.css";

  .moneyBtn {
    vertical-align: middle;
    display: inline-block;
    margin-right: 2px;
    margin-top: -2px;
  }

  .selectB {
    float: left;
    line-height: 37px;
    display: block;
    margin: 0px 30px;
    color: #7b8aa1;
  }

  .selectSpan {
    display: block;
    float: left;
    line-height: 37px;
    color: #7b8aa1;
    margin-right: 24px;
  }
	.selectSpan em{
		position: relative;
		top: 2px;
		margin-right: 4px;
	}
  .selectSpan:hover {
    cursor: pointer;
    color: #13c19f;
  }

  .selectSpan i {
    color: #13c19f;
    margin: 0px 6px;
  }

  .el-icon-close {
    font-size: 12px !important;
    display: block;
    float: left;
    line-height: 37px;
    padding: 0px 16px;
    color: #7b8aa1;
    margin-right: 20px;
  }

  .el-icon-close:hover {
    cursor: pointer;
    color: #13c19f;
  }

  .el-table {
    font-size: 12px !important;
  }

  .p {
    text-indent: 10px;
    line-height: 30px;
    cursor: pointer;
  }

  .p em {
    position: relative;
    top: 2px;
    margin-right: 3px;
  }

  .p:hover {
    background: #eef1f9;
    color: #03B8CC;
  }

  .ziJin-conBox > .block {
    float: right;
    margin-top: 10px;
  }

  .ziJin-conBox {
    padding: 0px 14px;
  }

  .goTo:hover {
    color: #13c19f;
    cursor: pointer;
  }

  .el-input__inner {
    border-radius: 50%;
  }

  section {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  div.location {
    flex: 0 0 10px;
    padding: 3px 0 15px 0;
  }

  div.content {
    position: relative;
    flex: 1;
    width: 100%;
    background-color: #fff;
  }

</style>
